<section id="template-list" class="clearfix pl-24 pr-24">
  <hl-page-header title="模版配置">
      <hl-button type="outline" @on-click="addTmp" v-if="selectedState == '合同打印模版' && quanxian.indexOf('c195') > -1">新增模版</hl-button>
      <hl-button type="outline" @on-click="addTmp" v-if="selectedState == '账单打印模版' && quanxian.indexOf('c132') > -1">新增模版</hl-button>
      <ul class="iconHover" v-if="selectedState == '合同打印模版'">
        <li class="icon-Gm-explain"></li>
        <li class="hoverText">
          <div></div>
          <ul class="instro">
            <li style="lineHeight:24px">新增模板步骤</li>
            <li style="lineHeight:24px">一、将系统内容复制替换本地合同模板关键字段 </li>
            <li style="lineHeight:24px">二、上传编辑后的合同模板</li>
          </ul>
        </li>
      </ul>
  </hl-page-header>


  <div class="mt-10 TL_buts">
    <div>
      <div class="TL_item_but" v-for="(item,index) in stateBtn" :key="index" :class="{'TL_item_but-active':selectedState == item.state}" @click="selectType(item.state)">{{item.state}}</div>
    </div>
  </div>

  <div class="mtb-10 box-i-shadow-1 br-4" style="border:1px solid rgba(229,229,229,1);box-shadow:none">
    <div class="clearfix border-b text-center color-gray dy-flex table_title" style=" line-height:40px;background: #F0F2FF">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-3">模版名称</div>
      <div class="dy-fx-5" v-if="selectedState == '账单打印模版'">适用项目</div>
      <div class="dy-fx-2">状态</div>
      <div class="dy-fx-2">操作</div>
    </div>
    <div class="text-center">
      <ul class="clearfix contract-list-item dy-flex table_body_item" v-for="(item,index) in listData" style="line-height:40px;">
        <li class="dy-fx-1">{{index + 1
          < 10 ? '0' + (index + 1) : index + 1 }} </li>
            <li class="dy-fx-3 ellipsis-1" :title="item.cCode">{{item.name || item.templateName}}</li>
            <li v-if="selectedState == '账单打印模版'" class="dy-fx-5 ellipsis-1 projectName" :qm="item.projectName">
              {{item.projectList ? item.projectList.join(',') : '--'}}
            </li>
            <li class="dy-fx-2 ellipsis-1" :title="item.name">{{item.valid == 'Y' ? '启用':'停用'}}</li>
            <li class="dy-fx-2 ellipsis-1">
              <a :href="'#/templateEdit?templateId='+item.id+'&ddtab=true'" target="_blank" class="mr-5" v-if="selectedState == '账单打印模版'">详情</a>
              <a :href="item.attachmentUrl" :download="item.attachmentUrl" class="mr-5" v-if="selectedState == '合同打印模版' && quanxian.indexOf('c197') > -1">下载</a>
              <a href="javascript:;" target="_blank" class="mr-5" v-if="selectedState == '合同打印模版'  && quanxian.indexOf('c199') > -1" @click="preview(item.id)">预览</a>
              <span v-if="selectedState == '账单打印模版'"><a href="javascript:;" @click="changeValid(item.id,'N')" v-if="item.valid == 'Y'" v-if="quanxian.indexOf('c135') > -1">停用</a></span>
              <span v-if="selectedState == '合同打印模版'"><a href="javascript:;" @click="changeValid(item.id,'N')" v-if="item.valid == 'Y'" v-if="quanxian.indexOf('c198') > -1">停用</a></span>
              <span v-if="selectedState == '账单打印模版'"><a href="javascript:;" @click="changeValid(item.id,'Y')" v-if="item.valid == 'N'" v-if="quanxian.indexOf('c135') > -1">启用</a></span>
              <span v-if="selectedState == '合同打印模版'"><a href="javascript:;" @click="changeValid(item.id,'Y')" v-if="item.valid == 'N'" v-if="quanxian.indexOf('c198') > -1">启用</a></span>
              <span v-if="selectedState == '账单打印模版'"> <a href="javascript:;" @click="deleteTmp(item.id)" v-if="quanxian.indexOf('c134') > -1">删除</a></span>
              <span v-if="selectedState == '合同打印模版'"> <a href="javascript:;" @click="deleteTmp(item.id)" v-if="quanxian.indexOf('c196') > -1">删除</a></span>
            </li>
      </ul>
    </div>
  </div>

  <!-- <button class="btn n-btn-default" @click="addTmp" v-if="quanxian.indexOf('c132') > -1">新增模版</button> -->
  </div>

</section>

<script src="modules/print_template/scripts/template_list.js" charset="utf-8"></script>
<style>
  .contract-list-item {
    margin: 0;
  }

  .contract-list-item:last-child {
    border-bottom: none;
  }

  .TL_item_but {
    width: 106px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
  }

  .table_body_item:nth-child(even) {
    background: #F9F9F9
  }

  .table_body_item:hover {
    background: #F0F0F7
  }

  .TL_item_but:first-child {
    border-radius: 4px 0 0 4px
  }

  .TL_item_but:last-child {
    border-radius: 0 4px 4px 0
  }

  .TL_item_but-active {
    color: #fff;
    background: #565E99;
    /* 变色 */
    margin-top: -1px
  }

  .icon-Gm-explain {
    color: #999
  }

  .TL_buts>div {
    display: flex;
    width: 212px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid rgba(229, 229, 229, 1);
    /* overflow: hidden; */
  }

  .TL_hl-list-title {
    display: flex;
    justify-content: space-between;
    overflow: visible;
    background: #fff;
  }

  .TL_hl-list-title h4 {
    font-weight: 500;
    line-height: 36px
  }

  .TL_hl-list-title>div {
    display: flex;
    align-items: center;
  }

  .TL_hl-list-title>div>div {
    cursor: pointer;
    width: 96px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgba(68, 73, 135, 1);
    /* 变色 */
    font-weight: 500;
    color: rgba(86, 94, 153, 1);
    /* 变色 */
    text-align: center;
    line-height: 36px;
    margin-right: 7PX;
  }

  .iconHover {
    position: relative;
  }

  .hoverText {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -250px;
    width: 280px;
    height: 110px;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    color: #999;
  }

  .hoverText div {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 250px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(315deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .hoverText ul {
    width: 100%;
    padding: 8px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }

  .iconHover:hover .hoverText {
    display: flex;
  }

  .n-btn-primary:first-child {
    border-radius: 4px 0 0 4px
  }

  .n-btn-primary:last-child {
    border-radius: 0 4px 4px 0
  }

  .hl-page-header__operation{
    padding-top: 10px;
  }
  .hl-page-header__operation .hl-button{
    float: left;
    margin-right: 10px;
  }
  .hl-page-header__operation .iconHover{
    float: left;
    position: relative;
    top:50%;
    right:0;
    transform: translate(0,60%);
  }


</style>
